<template>
  <div class="server-container">
    <!-- 顶部统计信息 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <div class="stats-card">
          <div class="stats-title">运行实例</div>
          <div class="stats-main">
            <div class="stats-value">
              <span class="number">12</span>
              <span class="divider">/</span>
              <span class="total">15</span>
            </div>
          </div>
          <div class="stats-desc">
            <span class="status-text">80% 运行中</span>
            <span class="extra-info">3 离线</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stats-card">
          <div class="stats-title">系统负载</div>
          <div class="stats-main">
            <div class="stats-value">
              <span class="number">42%</span>
            </div>
          </div>
          <div class="stats-desc">正常运行状态</div>
          <div class="progress-bar-container">
            <div class="progress-bar" :style="{ width: '42%', backgroundColor: getLoadColor(42) }"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stats-card">
          <div class="stats-title">活跃用户</div>
          <div class="stats-main">
            <div class="stats-value">
              <span class="number">28</span>
            </div>
          </div>
          <div class="stats-desc">
            <span>总用户: 42</span>
            <span class="rate">66.7% 活跃率</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stats-card">
          <div class="stats-title">系统告警</div>
          <div class="stats-main">
            <div class="stats-value">
              <span class="number">5</span>
            </div>
          </div>
          <div class="stats-desc">
            <span class="danger-text">严重: 1</span>
            <span class="warning-text">警告: 4</span>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 主要内容区 -->
    <div class="main-content-card">
      <!-- Tab切换 -->
      <div class="tab-container">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="实例管理" name="instances">
            <div class="tab-header">
              <div class="title">运行实例</div>
              <div class="actions">
                <el-button type="success" size="small">部署新实例</el-button>
                <el-button type="primary" size="small">刷新状态</el-button>
              </div>
            </div>
            
            <!-- 实例列表 -->
            <el-table :data="instanceList" style="width: 100%">
              <el-table-column prop="instanceId" label="实例ID"/>
              <el-table-column prop="name" label="名称"/>
              <el-table-column prop="env" label="环境">
                <template slot-scope="scope">
                  <el-tag size="small" type="info">{{ scope.row.env }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="server" label="服务器" />
              <el-table-column prop="version" label="版本" />
              <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                  <el-tag size="small" :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="runtime" label="运行时间" />
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button type="text" size="small">详情</el-button>
                  <el-button type="text" size="small">配置</el-button>
                  <el-button type="text" size="small" class="danger-text">重启</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="服务器管理" name="servers" />
          <el-tab-pane label="账号管理" name="accounts" />
          <el-tab-pane label="系统日志" name="logs" />
          <el-tab-pane label="任务监控" name="tasks" />
          <el-tab-pane label="条件与预警" name="alerts" />
        </el-tabs>
      </div>

      <!-- 部署历史 -->
      <div class="deployment-history">
        <div class="section-header">
          <div class="title">部署历史</div>
          <el-button type="text" size="small">查看全部</el-button>
        </div>
        <el-table :data="deployHistory" style="width: 100%">
          <el-table-column prop="time" label="时间" width="180" />
          <el-table-column prop="operation" label="操作" width="100" />
          <el-table-column prop="instance" label="实例" />
          <el-table-column prop="version" label="版本" width="100" />
          <el-table-column prop="operator" label="操作人" width="100" />
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag size="small" :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small">查看日志</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ServerManagement',
  data() {
    return {
      activeTab: 'instances',
      instanceList: [
        {
          instanceId: 'inst-001',
          name: '主文易引擎',
          env: '生产',
          server: 'srv-prod-01',
          version: 'v2.8.5',
          status: '运行中',
          runtime: '15天 7小时'
        },
        {
          instanceId: 'inst-002',
          name: '市场数据收集器',
          env: '生产',
          server: 'srv-prod-01',
          version: 'v2.8.5',
          status: '运行中',
          runtime: '15天 7小时'
        },
        {
          instanceId: 'inst-003',
          name: '风控系统',
          env: '生产',
          server: 'srv-prod-02',
          version: 'v2.8.5',
          status: '运行中',
          runtime: '10天 3小时'
        },
        {
          instanceId: 'inst-004',
          name: '策略A-趋势跟踪',
          env: '生产',
          server: 'srv-prod-03',
          version: 'v2.8.5',
          status: '待重启',
          runtime: '5天 12小时'
        },
        {
          instanceId: 'inst-005',
          name: '策略B-套利',
          env: '生产',
          server: 'srv-prod-03',
          version: 'v2.8.5',
          status: '已停止',
          runtime: '-'
        },
        {
          instanceId: 'inst-006',
          name: 'API网关',
          env: '测试',
          server: 'srv-staging-01',
          version: 'v2.8.6-beta',
          status: '运行中',
          runtime: '3天 9小时'
        }
      ],
      deployHistory: [
        {
          time: '2025-05-22 14:35:22',
          operation: '部署',
          instance: 'API网关',
          version: 'v2.8.6-beta',
          operator: 'admin',
          status: '成功'
        },
        {
          time: '2025-05-20 09:12:45',
          operation: '重启',
          instance: '风控系统',
          version: 'v2.8.5',
          operator: 'admin',
          status: '成功'
        },
        {
          time: '2025-05-18 11:52:18',
          operation: '更新',
          instance: '多个实例',
          version: 'v2.8.5',
          operator: 'admin',
          status: '成功'
        },
        {
          time: '2025-05-15 16:28:33',
          operation: '部署',
          instance: '策略B-套利',
          version: 'v2.8.4',
          operator: 'dev_user',
          status: '失败'
        }
      ],
      charts: {
        systemLoad: null
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts()
      // 添加窗口大小改变时重绘图表
      window.addEventListener('resize', this.resizeCharts)
    })
  },
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener('resize', this.resizeCharts)
    // 销毁图表实例
    Object.values(this.charts).forEach(chart => {
      if (chart) {
        chart.dispose()
      }
    })
  },
  methods: {
    initCharts() {
      // 初始化系统负载趋势图
      if (this.$refs.loadTrend) {
        this.charts.systemLoad = echarts.init(this.$refs.loadTrend)
        this.charts.systemLoad.setOption({
          grid: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
          },
          xAxis: {
            type: 'category',
            show: false,
            boundaryGap: false,
            data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00']
          },
          yAxis: {
            type: 'value',
            show: false,
            min: 0,
            max: 100
          },
          series: [{
            data: [35, 40, 38, 42, 45, 42, 40, 42],
            type: 'line',
            smooth: true,
            showSymbol: false,
            lineStyle: {
              color: '#409EFF',
              width: 2
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(64,158,255,0.2)'
              }, {
                offset: 1,
                color: 'rgba(64,158,255,0)'
              }])
            }
          }]
        })
      }
    },
    resizeCharts() {
      Object.values(this.charts).forEach(chart => {
        if (chart) {
          chart.resize()
        }
      })
    },
    getStatusType(status) {
      const typeMap = {
        '运行中': 'success',
        '待重启': 'warning',
        '已停止': 'danger',
        '成功': 'success',
        '失败': 'danger'
      }
      return typeMap[status] || 'info'
    },
    getLoadColor(load) {
      if (load < 50) return '#67C23A' // 低负载 - 绿色
      if (load < 80) return '#E6A23C' // 中负载 - 黄色
      return '#F56C6C' // 高负载 - 红色
    }
  }
}
</script>

<style lang="scss" scoped>
.server-container {
  padding: 20px;
  background-color: #f5f7fa;

  .stats-row {
    margin-bottom: 20px;

    .stats-card {
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      height: 180px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;

      .stats-title {
        font-size: 14px;
        color: #909399;
        margin-bottom: 20px;
      }

      .stats-main {
        margin-bottom: auto;
        
        .stats-value {
          .number {
            font-size: 28px;
            font-weight: 600;
            color: #303133;
          }

          .divider {
            font-size: 20px;
            color: #909399;
            margin: 0 4px;
          }

          .total {
            font-size: 20px;
            color: #909399;
          }
        }
      }

      .stats-desc {
        font-size: 13px;
        color: #606266;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;

        .status-text {
          color: #67C23A;
        }

        .extra-info {
          color: #909399;
        }

        .rate {
          color: #606266;
        }

        .danger-text {
          color: #F56C6C;
        }

        .warning-text {
          color: #E6A23C;
          margin-left: 15px;
        }
      }

      .progress-bar-container {
        margin-top: 20px;
        height: 6px;
        background-color: #f5f7fa;
        border-radius: 3px;
        overflow: hidden;

        .progress-bar {
          height: 100%;
          border-radius: 3px;
          transition: all 0.3s ease;
        }
      }
    }
  }

  .main-content-card {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

    .tab-container {
      padding: 20px;

      .tab-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .title {
          font-size: 16px;
          font-weight: 500;
          color: #303133;
        }

        .actions {
          display: flex;
          gap: 10px;
        }
      }
    }

    .deployment-history {
      padding: 0 20px 20px;

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-top: 20px;
        border-top: 1px solid #ebeef5;

        .title {
          font-size: 16px;
          font-weight: 500;
          color: #303133;
        }
      }
    }
  }

  .danger-text {
    color: #F56C6C;
  }

  ::v-deep .el-table {
    .el-button {
      padding: 0 5px;
    }
  }
}
</style> 